<!-- 页面 -->
<template>
	<s-layout navbar="custom">
		<s-empty v-if="state.mululist.length === 0" icon="/static/order-empty.png" text="课件上传中,请耐心等待!"></s-empty>

		<view v-show="state.mululist.length > 0" class="ss-flex video-player">
			<view class="left-sidebar">
				<view class="web-player">
					<view id="webPlayer" class="web" v-show="state.isStartPlay">
						<view id="playbackPlayer"></view>
					</view>
				</view>
				<view class="doclist" id="aa_doclist">
					<ul id="docul">
						<li v-for="(ppt, index) in state.pptdata" :key="index"
							:class="{ 'aa_active': state.pptSelectedIndex === index }" name="thumbnails" time="0"
							@click="clickppt(index, ppt.time)">
							<view class="ss-flex ss-col-center">
								<uni-icons custom-prefix="iconfont" type="icon-PPT" size="15" style="color:#f8cd88;">
								</uni-icons>
								<span class="ss-m-l-10">幻灯片 {{ppt.pageNum+1}}</span>
								<view class="ss-flex-1"></view>
								<span>{{ppt.formattime}}</span>
							</view>
						</li>
					</ul>
				</view>
			</view>
			<view class="video-wrapper">
				<view class="video-title">{{ currentRecord?.lesson_name }}</view>
				<view class="video-pdf" id="video-pdf">
					<!-- 文档模块 -->
					<!-- 回放文档模块 -->
					<!-- <div id="playbackPanel"></div> -->
					<div class="imgbox imgbox-scroll" id="imgbox">
						<div class="slider-bd allow-roll" id="ppts">
							<!-- 回放文档模块 -->
							<div id="playbackPanel"></div>
						</div>
					</div>

					<view class="playbackpanel-mask"></view>
					<view class="custom-controls">
						<div class="play-btn-control" @tap="togglePlayPause">
							<div v-if="!state.isPlaying">
								<uni-icons custom-prefix="iconfont" type="icon-play-full" size="18"
									style="color:#FFFFFF;"></uni-icons>
							</div>
							<div v-else>
								<uni-icons custom-prefix="iconfont" type="icon-zanting" size="18"
									style="color:#FFFFFF;"></uni-icons>
							</div>
						</div>
						<div class="current-time">{{state.currentTime}}</div>
						<div class="progress-container">
							<div id="probar" class="progress-box ss-flex ss-col-center" @click="onhaha"
								@touchend="controlEnd" @touchmove="controlMove">
								<view class="progerss-active" @touchstart="sliderStart"
									:style="{ width: state.progress + '%' }">
								</view>
							</div>
						</div>
						<div class="current-time">{{state.totalduration}}</div>
						<div class="play-btn-control" @tap="xuanzhuan">
							<uni-icons v-if="!state.isXuanzhuan" custom-prefix="iconfont" type="icon-quanpingxianshi" size="18"
								style="color:#FFFFFF;"></uni-icons>
							<uni-icons v-else custom-prefix="iconfont" type="icon-quanpingsuoxiao" size="18"
								style="color:#FFFFFF;"></uni-icons>
						</div>
					</view>

					<div id="speed-toggle" class="aa_beisu" @click="togglebeisu">倍速</div>
					<transition name="fade">
						<div v-show="state.isBeisuVisible">
							<ul class="aa_select" id="aa_select">
								<li v-for="(item, index) in beisuMaps" :key="index"
									@click="handleClickBeisu(index, item.value)">
									<a href="javascript:void(0)"
										:class="{ 'aa_active': state.beisuSelectedIndex === index }">{{ item.text }}</a>
								</li>
							</ul>
						</div>
					</transition>
				</view>
			</view>
			<view class="right-sidebar" :style="{'visibility': loaded ? 'visible' : 'hidden'}">
				<view class="goods-title" v-if="loaded">
					<view>{{ state.goodsinfo.title }}</view>
					<view class="teacher-name">
						<view>主讲人: {{ state.goodsinfo.teacher_name || '计划社名师' }}</view>
						<view class="ss-flex-1"></view>
						<view>共{{state.goodsinfo.lessonNum}}节</view>
					</view>
				</view>
				<view class="mulu-list">
					<view class="tabs-container">
						<s-tabs class="sticky-tabs" :list="[{name:'目录', value: 0}, {name:'资料', value: 1}]"
							v-model="state.currentTab" />
						<view class="tabs-content">
							<template v-if="state.currentTab === 0">
								<view class="mulu" v-for="(mulu, index) in state.mululist" :key="index"
									:ref="(el) => { if(parseInt(state.recordId) === mulu.id) activeItem = el?.[0] || el }"
									@click="navigateToCourse(mulu)"
									:class="{'aa_active': parseInt(state.recordId) === mulu.id}">
									<view class="mulu_content">
										<view class="mulu-title">{{mulu.lesson_name}}</view>
									</view>
									<view class="ss-flex-1"></view>
									<view class="mulu-shiting">
										<view v-if="state.paid_auth">
											<span v-if="mulu.live_set_status==0 && mulu.ccRecordId!=''"
												class="play-btn-default">已学{{mulu.LearnPercent}}%</span>
											<span v-else-if="mulu.live_set_status==0 && mulu.ccRecordId==''"
												class="play-btn-default">视频上传中</span>
											<span v-else-if="mulu.live_set_status==1"
												class="play-btn-default">待直播</span>
											<span v-else-if="mulu.live_set_status==2"
												class="play-btn-default playing">即将直播</span>
											<span v-else-if="mulu.live_set_status==3"
												class="play-btn-default playing">直播中</span>

										</view>
										<view v-else>
											<uni-icons v-if="mulu.is_audition==1" custom-prefix="iconfont"
												type="icon-shiting" size="20" style="color:#99a1af"></uni-icons>
											<uni-icons v-if="mulu.is_audition==0" custom-prefix="iconfont"
												type="icon-suo" size="15" style="color:#99a1af"></uni-icons>
										</view>
									</view>
								</view>
							</template>
							<template v-else>
								<view class="mulu" v-for="(ziliao, index) in state.ziliaolist" :key="index">
									<view class="mulu_content">
										<view class="mulu-title">{{ziliao.lesson_name}}</view>
									</view>
									<view class="mulu-xiazai ss-flex">
										<view @click="handleDownload(ziliao)">
											<span>下载</span>
										</view>
										<!-- <view @click="navigatorToZiliao(ziliao)">
											<span>查看</span>
										</view> -->
									</view>
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 提示未购买 -->
		<s-userpaid-card :isVisible="state.isBuyVisible" :goodsInfo="state.goodsinfo" @close-clicked="handleClose" />
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		ref
	} from 'vue';
	import '@/sheep/scss/bokecc/css/main_mobile.css';
	import $store from '@/sheep/store';
	import {
		showAuthModal,
		showShareModal
	} from '@/sheep/hooks/useModal';
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onHide,
		onReady
	} from '@dcloudio/uni-app';
	import {
		downloadFile
	} from '@/sheep/helper/download.js';

	const emits = defineEmits(['addCart', 'change']);

	const props = defineProps({
		goodsId: {
			type: [Number, String],
			default: 0,
		},
	});

	const tradeManaged = computed(() => sheep.$store('app').has_wechat_trade_managed);

	// 数据
	const state = reactive({
		totalduration: 0, //视频总时长
		currentTime: '00:00', // 当前播放时间
		progress: 0, // 进度条填充比例
		dragging: false, // 标记是否正在拖动
		startX: 0, // 记录拖动开始时的X坐标
		isDragging: false, // 用于跟踪是否正在拖动
		startProgress: 0, // 记录拖动开始时的进度值
		maxProgress: 100, // 最大进度值，可根据需要调整
		isStartPlay: true,
		isPlaying: false,
		isXuanzhuan: false,
		isBuyVisible: false, //控制购买的显示隐藏框
		paid_auth: false, //后台计算的是否购买
		currentTab: 0,
		pptdata: [],
		isBeisuVisible: false,
		beisuSelectedIndex: 1,
		pptSelectedIndex: 0,
		mululist: [],
		ziliaolist: [],
		recordId: 0,
		goodsinfo: [],
		pagedata: [],
		moveOffsetX: 0,
		scroll: 0, //需要滚动的距离,
		dw: null

	});

	const pointdata = [{
		time: 600, // s
		desc: '123'
	}];

	const tabMaps = [{
			name: '课程目录',
			value: 'video',
		},
		{
			name: '资料讲义',
			value: 'jiangyi',
		},
		{
			name: '课件选节',
			value: 'ppt',
		}

	];

	const beisuMaps = [{
			value: 0.8,
			text: '0.8X'
		},
		{
			value: 1,
			text: '正常',
			class: 'aa_bcurr'
		}, // 注意：这里的 class 不会在 v-for 中直接应用，如果需要可以添加逻辑  
		{
			value: 1.25,
			text: '1.25X'
		},
		{
			value: 1.5,
			text: '1.5X'
		},
		{
			value: 2,
			text: '2.0X'
		},
	];

	const currentRecord = computed(() => {
		return state.mululist.find(lesson => lesson.id === parseInt(state.recordId));
	});

	const loaded = computed(() => {
		return !!currentRecord.value;
	});

	onLoad(async (options) => {
		await loadScript("/static/bokecc/js/touchSlide.js");
		await loadScript("/static/bokecc/js/playbackSDK.js");
		await loadScript("/static/bokecc/js/main.js");
		await loadScript("/static/bokecc/js/jquery.panzoom.min.js");

		props.goodsId = options.id;
		if (options.recordId) {
			state.recordId = options.recordId;
		}

		// if(recordindex){}
		// 页面登录拦截
		// if (!$store('user').isLogin) {
		//   showAuthModal();
		//   return;
		// }

		//初始化回放视频
		gethuifang(options.id, state.recordId);


		//当前分片文档翻页信息/ 文档缩略图
		window.on_cc_callback_pages = function(pageData) {
			var temparr = [];
			var pptarr = [];
			for (var i = 0; i < pageData.length; i++) {
				if (temparr.indexOf(pageData[i].pageNum) == -1) {
					pageData[i].formattime = descTime(pageData[i].time)
					pptarr.push(pageData[i]);
					temparr.push(pageData[i].pageNum);
				}
			}
			state.pagedata = pptarr;
			state.pptdata = pptarr;
		}

		//监听页面直接关闭事件
		window.addEventListener(
			"beforeunload",
			beforeunloadHandler
		);

		const processBarRef = ref(null);


		//setTimeout(yanchiplay,2000);
	});

	function onhaha(e) {
		//let all=document.getElementById("probar").style.width;
		// 获取元素
		var element = document.getElementById("probar");
		var computedStyle = window.getComputedStyle(element);
		var allwidth = parseFloat(computedStyle.width);

		state.progress = e.layerX / allwidth * 100;
		var nowtime = parseInt($.DW.getDuration() * state.progress / 100);
		state.currentTime = descTime(nowtime);
		$.DW.seek(nowtime, 'play');
		state.isPlaying = true
		state.pptSelectedIndex = findMaxIndexWithTimeLessThan200(nowtime);
	};

	function findMaxIndexWithTimeLessThan200(nowtime) {
		let maxIndex = -1;
		//console.log(state.pagedata.length)
		for (let i = 0; i < state.pagedata.length; i++) {
			if (state.pagedata[i].time < nowtime) {
				maxIndex = Math.max(maxIndex, i);
				//console.log(maxIndex)
			}
		}

		return maxIndex;
	}

	function handleDownload(material) {
		//downloadFile(material.download_url, material.lesson_name);
    downloadFile(sheep.$url.cdn(material.download_url), material.lesson_name);

	}


	function beforeunloadHandler(e) {
		// 兼容性处理，确保在所有浏览器中都能正确设置returnValue
		const event = e || window.event;

		savelearnrecord();

		// 设置returnValue属性，这将触发浏览器的默认离开确认对话框  
		// 注意：现代浏览器可能会忽略自定义文本，只显示默认的对话框  
		event.returnValue = '您确定要离开这个页面吗？'; // 老版本浏览器  

		// 对于现代浏览器，除了设置returnValue，还需要返回一个字符串  
		// 但请注意，这个字符串可能不会在所有浏览器中作为对话框文本显示  
		return '您确定要离开这个页面吗？'; // 现代浏览器  
	};

	//保存用户学习记录
	function savelearnrecord() {
		console.log('state.goodsinfo');
		console.log(state.goodsinfo.id);

		if (Number(state.recordId) > 0) {
			sheep.$api.course.saveLearRrecord({
				'goods_id': state.goodsinfo.id,
				'lesson_id': state.recordId,
				'LearnSecond': $.DW.getPlayerTime(),
				'source': 'h5',
				'url': 'aaaaaa'
			}).then((res) => {
				if (res.code === 1) {
					console.log("存储学习记录成功")
				} else {
					// 未找到商品
					console.log("未找到")
				}
			});
		}
	};

	//页面在h5中跳转
	onUnload(async (options) => {
		console.log('onUnload');
		savelearnrecord();
	});

	onHide(async (options) => {
		savelearnrecord();
	});

	//跳转别的小节
	function navigateToCourse(course) {
		savelearnrecord();
		if (state.paid_auth || course.is_audition == 1) {
			if (course.live_set_status == 1) {
				sheep.$helper.toast('等待直播，敬请关注');
			} else if (course.live_set_status == 0) {
				if (course.ccRecordId != "") {
					$.DW.destroy();
					sheep.$router.go('/pages/course/huifang', {
						id: state.goodsinfo.id,
						recordId: course.id
					})
				} else {
					//课件上传中
					sheep.$helper.toast('回放视频上传中');
				}
			} else if (course.live_set_status == 2 || course.live_set_status == 3) {
				sheep.$router.go('/pages/course/zhibo', {
					id: state.goodsinfo.id,
					lesson_id: course.id
				})
			}
			
		} else {
			state.isBuyVisible = true
		}
	};

	function navigatorToZiliao(ziliao) {
		if (state.paid_auth || ziliao.is_audition == 1) {
			sheep.$router.navigatorToZiliao(ziliao.id, 'lesson')
		} else {
			state.isBuyVisible = true
		}
	}

	function downloadZiliao(lesson) {
		if (state.paid_auth || is_audition == 1) {
			downloadFile(lesson.download_url, lesson.lesson_name);
		} else {
			state.isBuyVisible = true
		}
	}

	function shownowtime() {
		//console.log($.DW.getPlayerTime())
		state.currentTime = descTime($.DW.getPlayerTime());
		state.pptSelectedIndex = findMaxIndexWithTimeLessThan200($.DW.getPlayerTime());
		state.progress = $.DW.getPlayerTime() / $.DW.getDuration() * 100;

		var scroll = ((state.pptSelectedIndex / 3) - 1) * 73;

		var div = document.getElementById('aa_doclist');

		if (scroll > 0 && state.scroll != scroll) {
			div.scrollTop = scroll; // 向上滚动100像素
			state.scroll = scroll
		}

		setTimeout(shownowtime, 500);
	}

	let activeItem = null;

	// 获取初始化回放视频
	async function gethuifang(goodsId, recordId) {
		state.loadStatus = 'loading';
		let res = await sheep.$api.course.huifang({
			goods_id: goodsId,
			recordId: recordId
		});
		if (res) {
			state.paid_auth = res.data.result.paid_auth;
			state.mululist = res.data.result.recordlist;
			state.ziliaolist = res.data.result.ziliaolist;
			state.goodsinfo = res.data.result.goodsinfo

			if (res.data.result.recordlist.length > 0) {
				//根据id查询当前要播放的回放记录
				state.currentindex = res.data.result.recordlist.findIndex(lesson => lesson.id === parseInt(res.data
					.result.current));
				const current = res.data.result.recordlist[state.currentindex];
				state.recordId = res.data.result.current;

				setTimeout(() => {
					if (activeItem && activeItem.$el) {
						activeItem.$el.scrollIntoView({
							behavior: 'smooth',
							block: 'center'
						});
					}
				}, 100);

				const el = document.getElementById('video-pdf');

				if (current.is_audition == 1 || state.paid_auth == true) {
					$.DW.config({
						userId: res.data.ccinfo.userid,
						roomId: current.ccRoomId,
						recordId: current.ccRecordId,
						viewername: '123',
						viewertoken: res.data.ccinfo.token,
						isH5play: true,
						viewercustomua: '', //可选
						fastMode: true,
						groupId: "",
						watchStartTime: 0, //可选，回放的起播时间，单位秒
					});
					state.dw = $.DW
					//显示隐藏控制条
					$.DW.isShowBar(0);

					//更改title
					uni.setNavigationBarTitle({
						title: current.lesson_name
					})
				} else {
					state.isBuyVisible = true;
				}

				window.on_cc_player_ready = function() {
					if (current.LearnPercent > 0) {
						state.currentTime = current.LearnSecond
						$.DW.seek(state.currentTime, "play");

						state.progress = current.LearnPercent;
						state.pptSelectedIndex = findMaxIndexWithTimeLessThan200(current.LearnPercent);
						setTimeout(yanchiplay, 2000);
					}
				}

				window.on_cc_callback_play = function() {
					console.log('回放开始播放了----');

				}

				//播放器加载完成
				window.on_cc_live_player_load = function() { // 播放器加载完毕
					state.totalduration = descTime($.DW.getDuration());
					state.isPlaying = true;
					shownowtime();
					
					//更新该课件的duration值
					updateDuration($.DW.getDuration());
				};
				
				

				window.on_spark_player_pause = function() {
					state.isPlaying = false;
				}

				window.on_spark_player_resume = function() {
					state.isPlaying = true;
				}

				window.on_spark_player_end = function() {
					state.isPlaying = false;
				}

				//播放停止
				// window.on_spark_player_end = function () {
				// 	console.log('end');
				// 	for(var i=state.currentindex+1; i<state.mululist.length-1;i++){
				// 		state.currentindex = i;
				// 		if(state.currentindex<state.mululist.length){
				// 		   if(state.mululist[state.currentindex].ccRecordId !='' && state.mululist[state.currentindex].LearnPercent <100){
				// 			   var current = state.mululist[state.currentindex];
				// 			   navigateToCourse(current);
				// 		   }
				// 		}
				// 	}
				// }
			}
		}

		//console.log(state.dw.seek(6401, "play")) // 跳转到指定时间播放，time单位为秒
		//state.progress = current.LearnPercent;
	};

	function yanchiplay() {
		//$.DW.play();
		state.isPlaying = !state.isPlaying;
		$.DW.play();
		shownowtime();
	}

	function descTime1(t) {
		var m = parseInt(t / 60, 10);
		var s = parseInt(t % 60, 10);

		if (m < 10) {
			m = '0' + m;
		}
		if (s < 10) {
			s = '0' + s;
		}
		return m + ":" + s;
	};

	function descTime(totalSeconds) {
		// 1秒 = 1000毫秒, 1分钟 = 60秒, 1小时 = 60分钟
		const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
		const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
		const seconds = String(totalSeconds % 60).padStart(2, '0');

		return `${hours}:${minutes}:${seconds}`;
	}

	// 切换选项卡
	function onTabsChange(e) {
		if (state.currentTab === e.index) return;
		state.currentTab = e.index;
	}

	function subDateTime(time) {
		// 使用字符串截取方法，保留年月日部分
		return time.substring(0, 10);
	}

	//点击幻灯片进行切换
	function clickppt(index, t) {
		var t = parseInt(t, 10);
		if (isNaN(t)) {
			return;
		}
		$.DW.seek(t, "play");
		state.isPlaying = true
		state.progress = t / $.DW.getDuration() * 100;
		state.currentTime = descTime(t);
		state.pptSelectedIndex = index;
	}

	//倍速是否显示
	function togglebeisu() {
		// 切换isVisible的值  
		state.isBeisuVisible = !state.isBeisuVisible;
	}

	function handleClickBeisu(index, value) {
		$.DW.playbackRate(value);
		state.beisuSelectedIndex = index;
		state.isBeisuVisible = false;
	}

	function handleClose() {
		state.isBuyVisible = false;
	};

	function handleOpen() {
		state.isBuyVisible = true;
	};
	function updateDuration(duration){
	  sheep.$api.course.updateDuration({
	    'goods_id': state.goodsinfo.id,
	    'lesson_id': state.recordId,
	    'Duration': duration
	  }).then((res) => {
	    if (res.code === 1) {
	      console.log("保存Duration成功")
	    } else {
	      // 未找到商品
	      console.log("未找到")
	    }
	  });
	}

	async function loadScript(url) {
		return new Promise((resolve, reject) => {
			var script = document.createElement("script");
			script.type = "text/javascript";
			script.src = url;

			script.onload = function() {
				resolve();
			};

			script.onerror = function() {
				reject();
			};

			document.head.appendChild(script);
		});
	}

	function togglePlayPause() {
		if (!state.isStartPlay) {
			state.isStartPlay = true
		}
		// 切换播放状态
		state.isPlaying = !state.isPlaying;
		$.DW.play();
		//console.log(document.getElementsByTagName("video")[0])
	}

	function xuanzhuan() {
		var screenWidth = window.innerWidth;
		var screenHeight = window.innerHeight;
		var element = document.getElementById('video-pdf');

		if (!state.isXuanzhuan) {
			// 计算高度（使用px单位）
			//var heightInPx = screenHeight * 9 / 16;
			//element.style.transform = 'rotate(90deg)';
			element.style.width = '100%';
			element.style.height = '100%';
			element.style.position = 'fixed';
			element.style.zIndex = '999';
			element.style.left = "0px";
			element.style.top = "0px";
			//document.getElementById('ppts').style.height = heightInPx + 'px';
			state.isXuanzhuan = true;
		} else {
			// 计算高度（使用px单位）
			//var heightInPx = screenWidth * 9 / 16;
			element.style.width = '100%';
			element.style.height = screenHeight-60;
			element.style.position = 'relative';
			element.style.zIndex = '0';
			element.style.left = "0px";
			element.style.top = "0px";
			state.isXuanzhuan = false;
		}

	}

	//当开始触摸开始在圆点按下时
	const sliderStart = (e) => {
		e.preventDefault();
		var element = document.getElementById("probar");
		var computedStyle = window.getComputedStyle(element);
		var allwidth = parseFloat(computedStyle.width);
		state.moveOffsetX = e.touches[0].clientX - element.getBoundingClientRect().x;
		state.progress = state.moveOffsetX / allwidth * 100;

	}

	const controlMove = (e) => {
		e.preventDefault()
		var element = document.getElementById("probar");
		var computedStyle = window.getComputedStyle(element);
		// 滑动距离可视区域左侧的距离
		const X = e.touches[0].clientX - element.getBoundingClientRect().x;
		//得到本次拖动已经过的距离
		const cl = X - state.moveOffsetX;
		//容器的宽度
		var width = parseFloat(computedStyle.width);
		//得到已拖动到的宽度
		//const ml =  document.getElementById('probar').getBoundingClientRect().x + cl
		let proWidth
		if (cl <= 0) {
			//进度条长度最小和最大值的界定
			proWidth = 0
		} else if (cl >= width) {
			proWidth = width
		} else {
			proWidth = cl
		}
		state.progress = proWidth / width * 100;
		var nowtime = parseInt($.DW.getDuration() * state.progress / 100);
		state.currentTime = descTime(nowtime);
		$.DW.seek(nowtime, "play");
		state.isPlaying = true
		state.pptSelectedIndex = findMaxIndexWithTimeLessThan200(nowtime);
	}

	//滑动结束
	const controlEnd = () => {

	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.page-body {
		background: #FFFFFF;
	}

	.video-pdf {
		position: relative;
		min-height: 230px;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	}

	#ppts {
		height: calc(100vw * 9 / 16);
		/* 使用calc()计算高度 */
	}

	#playbackPanel {
		width: 100%;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 1s;
	}

	.fade-enter,
	.fade-leave-to

	/* .fade-leave-active in <2.1.8 */
		{
		opacity: 0;
	}

	.u-sticky {
		z-index: 8 !important;
	}

	.doclist {
		height: calc(100% - 240px);
		padding: 10px 0 10px 0;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	.doclist li {
		padding: 10px;
		overflow: hidden;
		box-sizing: border-box;
		text-align: center;
		-webkit-overflow-scrolling: touch;

		&:not(:last-child) {
			border-bottom: 1px solid #ccc;
		}
	}

	.ppt-span {
		font-size: 12px;
		line-height: 36px;
		background-size: 16px;
		margin-left: 5px;
	}

	.doclist .ppttime {
		color: #999;
		font-size: 12px;
		margin-left: 10px;
	}

	.aa_active {
		color: #da6e04 !important;
	}

	.aa_active .uni-icons {
		color: #c66200 !important;

	}

	.mulu {
		padding: 8px 6px;
		box-sizing: border-box;
		display: flex;
	}

	.u-tabs {
		border-bottom: 0.0625rem solid #eee;
		border-top: 1px solid #FFCB82;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		background: linear-gradient(to bottom, #fff9f3, #ffe6ce);
	}

	.courseinfo {
		display: flex;
		font-size: 28rpx;
		padding: 13px;
		width: 100%;
		height: 100px;
		background: #FFFFFF;
		box-sizing: border-box;


		.left {
			width: 70%;
		}

		.right {
			width: 30%;
			height: 80px;
		}

		.right view {
			width: 100%;
			height: 30px;
			color: #666666;
			font-size: 0.75rem;
			background-color: #eeeeee;
			line-height: 30px;
			padding-left: 7px;
			border-top-left-radius: 30px;
			border-bottom-left-radius: 30px;
		}

	}

	.play-btn-default {
		color: #99a1af;
		font-size: 20rpx;
	}

	.playing {
		color: #ff6000;
	}

	.mulu_content {
		width: 90%;
	}

	.mulu-title {
		font-size: 28rpx;
	}

	.mulu-xiazai {
		flex-shrink: 0;
		cursor: pointer;
		color: #9fa3a2;

		&>* {
			margin-left: 5px;
		}
	}

	.mulu_icon {
		width: 50px;
		text-align: center;
		margin-top: 10px;
	}

	.mulu-time {
		font-size: 12px;
		color: #999999;
		background-size: 14px;
		height: 20px;
		line-height: 24px;
		margin-top: 10px;
		border: none;

	}

	.mulu-shiting {
		flex-shrink: 0;
		font-size: 14px;
	}

	.aa_beisu {
		position: absolute;
		bottom: 50px;
		right: 10px;
		min-width: 30px;
		height: 28px;
		background: #f9f9f9;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		z-index: 8;
		border-radius: 4px;
		line-height: 30px;
		font-size: 13px;
		text-align: center;

	}

	.aa_select {
		position: absolute;
		bottom: 0;
		right: 95px;
		background: rgba(22, 22, 22, 0.8);
		border: 1px solid rgba(102, 102, 102, 0.50);
		border-radius: 4px;
		width: 78px;
		height: 178px;
		z-index: 8;
		padding-inline-start: 0px;
	}

	.aa_select li {
		height: 34px;
		line-height: 34px;
		text-align: center;
		cursor: pointer;
		font-size: 12px;
		color: #B6B6B6;
		list-style: none;
		text-decoration: none
	}

	.aa_select li a {
		color: #FFFFFF;
		text-decoration: none;
	}

	#playbackPlayer {
		width: 100%;
		height: 100%;
	}

	.imgbox-scroll {
		overflow-y: scroll;
	}

	#full-screen {
		width: 80px;
		height: 30px;
		border-right: 1px solid #ccc;
		margin-right: 4px;
	}

	.full-screen {
		width: 50px;
		height: 30px;
		border-right: 1px solid #ccc;
		margin-right: 2px;
	}

	#playbackPanel {
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #fff;
	}

	.custom-controls {
		position: absolute;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 14px;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-around;
		padding: 0 8px;
		height: 40px;
		bottom: 0;
		background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
		background: linear-gradient(180deg, transparent, #000);


		.current-time {
			margin-left: 3px;
			min-width: 50px;
			font-size: 12px;
			color: #FFFFFF;
		}

		.play-btn-control {
			font-size: 10px;
			color: #FFFFFF;
		}

		.progress-container {
			width: 75%;
			height: 6px;
			position: relative;
			margin: 0 4px;
		}

		.progress-box {
			border-radius: 12rpx;
			background: rgba(0, 0, 0, 0.4);
			height: 6px;
			width: 100%;
		}
	}

	.progerss-active {
		height: 6px;
		background: linear-gradient(86deg, #f60600, #ff6000);
		border-radius: 12rpx;
	}

	.no-scroll {
		overflow: hidden;
		/* 阻止滚动 */
	}

	.video-player {
		height: 100vh;
		width: 100vw;
	}

	.video-wrapper {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		flex-grow: 1;

		.video-title {
			padding-left: 20px;
			height: 60px;
			line-height: 60px;
			background-color: #1a1a1a;
			flex-shrink: 0;
			color: white;
			font-size: 20px;
		}

		#video-pdf {
			height: calc(100% - 60px);
		}
	}

	.left-sidebar {
		display: flex;
		flex-direction: column;
		width: 300px;
		flex-shrink: 0;
		height: 100%;
		border-right: 6px solid #3E3E3E;

		.web-player {
			height: 240px;
		}
	}

	.right-sidebar {
		display: flex;
		flex-direction: column;
		width: 300px;
		flex-shrink: 0;
		height: 100%;
		border-left: 6px solid #3E3E3E;
	}

	.goods-title {
		font-size: 16px;
		font-weight: bold;
		background-color: #0C1A29;
		color: white;
		padding: 10px;
		flex-shrink: 0;
		line-height: 1.333;
	}

	.teacher-name {
		display: flex;
		margin-top: 5px;
		font-size: 14px;
		color: #ccc;
	}

	.mulu-list {
		flex-grow: 1;
		overflow: auto;
		padding: 0 10px;
	}

	.sticky-tabs {
		position: sticky;
		top: 0;
		z-index: 100;
		margin-bottom: 10px;
		background-color: #fff;
	}
</style>